<template>
<h3>{{ student.name }}</h3>
<p v-for="item of student.skill">
{{ item }}</p>
<p>{{ studentContent }}</p>
<!-- 这里函数需要加括号显示 -->
<p> {{ studentContentFunc() }}</p>

<h4>对比计算属性和方法的区别</h4>
<p>{{ addCount }}</p>
<p>{{ addCount }}</p>
<p>{{ addCount }}</p>
<p>{{ addCount }}</p>
<p>{{ addMethod() }}</p>
<p>{{ addMethod() }}</p>
<p>{{ addMethod() }}</p><p>{{ addMethod() }}</p><p>{{ addMethod() }}</p>
<p>这里可以看到计算属性只调用了一次,但是计算方法调用了多次</p>
</template>
<script>
export default {
    data() {
        return {
            student: {
                name: "孙悟空",
                skill: ["金箍棒", "筋斗云", "七十二变"]
            },
            computedNum:2,
            methodsNum:3
        }
    },
    // 计算属性
    computed: {
        studentContent() {
            // 这里会把计算后的结果给 studentContent,这个可以作为变量传值给页面显示
            return this.student.skill.length > 0 ? "是的" : "否";
        },
        addCount() {
            console.log("调用计算属性")
            return this.computedNum + this.methodsNum
        }
    },
    // 使用方法函数来计算
    methods: {
        studentContentFunc() {
            return this.student.skill.length > 0 ? "是的func" : "否func";
        },
        // 上面计算属性和方法都可以实现同样的效果,但是计算属性会基于响应式依赖被缓存,而方法总是会在重渲染的时候再次执行
        // 也就是在多次调用的时候,方法属性只会计算一次,使用缓存的结果,但是方法每次调用都会计算一次
        addMethod() {
            console.log("调用计算方法")
            return this.computedNum + this.methodsNum
        }
    }
}
</script>